<template>
  <view class="collect">
    <hnav title="收藏"></hnav>
    <view class="notc" v-if="!iscoll">
      <icon type="info" size="80" />
      <view class=""> 没添加收藏 </view>
    </view>
    <view class="coll" v-if="iscoll">
      <uni-card
        v-for="v in collarr"
        :title="v.title"
        :thumbnail="v.houseImg"
        :extra="'￥' + v.price + '/月'"
        @click="godet(v.houseCode)"
      >
        <uni-tag
          @click="notc(v.houseCode)"
          text="取消收藏"
          type="error"
        ></uni-tag>
      </uni-card>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      iscoll: false, // 默认没有收藏
      collarr: [], // 收藏的数据
    };
  },
  methods: {
    // 获取收藏
    getcoll() {
      // 清空之前的数据
      this.collarr = [];
      let collarr = uni.getStorageSync("collarr");
      console.log(collarr);
      if (collarr) {
        // 已经收藏过
        // 判断收藏是否为空数组
        if (collarr.length != 0) {
          // 收藏不为空
          this.iscoll = true;
          this.collarr = collarr;
        } else {
          this.iscoll = false;
        }
      }
    },
    notc(code) {
      // 取消收藏
      console.log(code);
      let arr = this.collarr.filter((v) => v.houseCode != code);
      uni.setStorageSync("collarr", arr);
      this.getcoll();
    },
    godet(code) {
      console.log(code);
      uni.navigateTo({
        url: "/pages/det/det?code=" + code,
      });
    },
  },
  onShow() {
    this.getcoll();
  },
};
</script>

<style>
.notc {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 150px;
  align-items: center;
}
</style>
